<template>
	<view class="AiLisotian_box1">

		<uniNavBar left-icon="back" title="小思同学🚀🚀 " color="#ffffff" 
			backgroundColor="linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6))">
			<view slot="right" class="">	
				<view class="uniNavBar"><image class="image" src="./imgs/person01.png" /></view>		
			</view>
		</uniNavBar>



		<!-- 消息列表 (必须配置id,以便定位) -->
		<!-- 中间 聊天内容区域 -->
		<view class="main">
			<!-- 需配置bottom的偏移量, 用于底部留白 -->
			<mescroll-uni ref="mescrollRef" top="44px" bottom="100" @init="mescrollInit" :down="downOption"
				@down="downCallback" :up="upOption">
				<!-- 无更多消息 -->
				<view v-if="isEnd" class="msg-end">没有更多消息了</view>
				<view class="talk_list" v-for="(item,idx) in lisotianList" :key="idx" :id="'msg' + item.id">
					<!-- 机器人说的话 -->
					<view class="left_word word" v-if="item.type == 0">
						<image src="./imgs/person01.png" /> <text>{{item.text}}</text>
					</view>
					<!-- 你说的话 -->
					<view class="rightList word" v-else>
						<image src="./imgs/person02.png" /> <text>{{item.text}}</text>
					</view>
					<!-- 底部留空 -->
					<view class="rightList word" style="opacity: 0;" v-if="lisotianList.length - 1 == idx">
						<image src="./imgs/person02.png" /> <text>{{item.text}}</text>
					</view>
				</view>
			</mescroll-uni>
			 <video v-if="voiceUrl" :src="voiceUrl"></video>
		</view>



		<!-- 中间 聊天内容区域 -->
		<!-- <view class="main">
			<scroll-view scroll-y="true" class="scrollview" :scroll-top="scrollTop" @scroll='scroll'>
				<view class="talk_list" v-for="(item,idx) in lisotianList" :key="idx"> -->
		<!-- 机器人说的话 -->
		<!-- <view class="left_word word" v-if="item.type == 0">
						<image src="./imgs/person01.png" /> <text>{{item.text}}</text>
					</view> -->
		<!-- 你说的话 -->
		<!-- <view class="rightList word" v-else>
						<image src="./imgs/person02.png" /> <text>{{item.text}}</text>
					</view> -->
		<!-- 底部留空 -->
		<!-- 			<view class="rightList word" style="opacity: 0;" v-if="lisotianList.length - 1 == idx">
						<image src="./imgs/person02.png" /> <text>{{item.text}}</text>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 底部 消息编辑区域 -->
		<view class="footer">
			<image src="./imgs/person02.png" alt="icon" />
			<input type="text" placeholder="说的什么吧..." class="input_txt" v-model="ipt" @confirm="OnConfirm" />
			<view class="button" @click="Ailiaotian()">发送</view>
		</view>

		<tip></tip>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		components: {
			uniNavBar
		},
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				ipt: '',
				lisotianList: [{
					type: 0,
					text: "嗨，最近想我没有？",
					id:1
				}],
				// scrollTop: 99999,
				// scrollTop2: 0,

				downOption: {
					autoShowLoading: true, // 显示下拉刷新的进度条
					textColor: "#FF8095" // 下拉刷新的文本颜色
				},
				upOption: {
					use: false, // 禁止上拉
				},
				pageNum: 1, // 页码
				pageSize: 10, // 页长
				isEnd: false, // 是否无消息
				voiceUrl:''

			};
		},
		methods: {
			scroll: function(e) {
				this.scrollTop2 = e.detail.scrollTop
			},
			GoscrollTop() { //拉到最低
				let that = this
				//解决scrollTop不生效问题，监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
				// that.scrollTop = this.scrollTop2;
				// that.$nextTick(function() {
				// 	that.scrollTop = 99999;
				// })
				this.mescroll.scrollTo(99999, 0)
			},
			OnConfirm(ev){//点击完成and回车发送消息
				this.Ailiaotian()
			},
			Ailiaotian() { //聊天
				let that = this
				let {
					pageSize,
					pageNum,
					lisotianList
				} = this
				let ipt = this.ipt.trim()
				if (!ipt) return this.$tip('至少输入点啥吧！🚀🚀')
				let prems = {
					spoken: ipt
				}
				this.GoscrollTop()

				let msgId1 = (pageNum - 1) * pageSize + lisotianList.length + 2;
				let msgId2 = (pageNum - 1) * pageSize + lisotianList.length + 2;
				this.lisotianList.push({
					id: msgId1,
					type: 1,
					text: ipt,

				})
				this.ipt = ""

				this.$api.GetAi(prems).then((res) => {
					let texts = res.data.data.info.text
					that.lisotianList.push({
						id: msgId2,
						type: 0,
						text: texts
					})
					that.Getsynthesize(texts)
					that.GoscrollTop()
				})
			},
			//文字变成语音
			Getsynthesize(text){
				text = JSON.stringify(text)
				this.$api.Getsynthesize(text).then((res) => {
					console.log('res',res);
					let voiceUrl = res.data.voiceUrl
					// this.voiceUrl = voiceUrl
					console.log('voiceUrl',voiceUrl);
					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = true;
					innerAudioContext.src = voiceUrl;
					innerAudioContext.onPlay(() => {
					  console.log('开始播放');
					});
					innerAudioContext.onError((res) => {
					  console.log(res.errMsg);
					  console.log(res.errCode);
					});
				})
			},
			/*下拉刷新的回调 获取聊天纪录*/
			downCallback() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				//联网加载数据
				console.log('params',params);
				this.$api.apiMsgList(params).then(data => {
					// 需自行维护页码					
					this.pageNum++;
					// 先隐藏下拉刷新的状态
					this.mescroll.endSuccess();
					// 不满一页,说明已经无更多消息 (建议根据您实际接口返回的总页码数,总消息量,是否有消息的字段来判断)
					if (data.length < this.pageSize) {
						this.isEnd = true; // 标记已无更多消息
						this.mescroll.lockDownScroll(true); // 锁定下拉
					}
					
					// 获取当前最顶部的VIEW_ID (注意是写在data.concat前面)
					let topMsg = this.lisotianList[0]

					//设置列表数据
					this.lisotianList = data.concat(this.lisotianList); // 注意不是this.msgList.concat
					this.$nextTick(() => {
						if (this.pageNum <= 2) {
							// 第一页直接滚动到底部 ( this.pageNum已在前面加1 )
							this.mescroll.scrollTo(99999, 0)
						} else if (topMsg) {
							// 保持顶部消息的位置
							let view = uni.createSelectorQuery().select('#msg' + topMsg.id);
							view.boundingClientRect(v => {
								console.log("节点离页面顶部的距离=" + v.top);
								this.mescroll.scrollTo(v.top - 100, 0) // 减去上偏移量100
							}).exec();
						}
					})

				}).catch(() => {
					this.pageNum--; // 联网失败,必须回减页码
					this.mescroll.endErr(); // 隐藏下拉刷新的状态
				})
			}

		}
	}
</script>

<style lang="scss">
	.AiLisotian_box1 {

		/* 无更多消息 */
		.msg-end {
			padding: 40rpx 0;
			font-size: 24rpx;
			text-align: center;
			color: #FF8095;
		}

		.uniNavBar {
			display: flex;
			align-items: center;

			.image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				box-shadow: 0 0 5px #f7f2fe;
			}
		}

		.main {
			width: 100%;
			position: absolute;
			top: 44px;
			left: 0;
			right: 0;
			bottom: 100rpx;
			background-color: #f4f3f3;

			.scrollview {
				width: 100%;
				height: 100%;

			}

			.talk_list {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;

				.word {
					width: 100%;
					display: flex;
					align-items: center;
					padding-top: 20rpx;
					justify-content: end;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
						box-shadow: 0 0 5px #f7f2fe;
					}

					text {
						padding: 10rpx 15rpx;
						max-width: 520rpx;
						border-radius: 12rpx;

						position: relative;
						line-height: 48rpx;

						&:before {
							content: '';
							position: absolute;
							width: 26rpx;
							height: 24rpx;
						}
					}

					&.left_word {
						text {
							background-color: #fe9697;
							color: #fff;
							margin-left: 13rpx;

							&:before {
								left: -8rpx;
								top: 3rpx;
								background: url('./imgs/corner01.png') no-repeat;
							}
						}
					}

					&.rightList {
						flex-direction: row-reverse;

						text {
							margin-right: 13rpx;
							background-color: #fff;
							color: #000;

							&:before {
								right: -8rpx;
								top: 3rpx;
								background: url('./imgs/corner02.png') no-repeat;
							}
						}
					}
				}
			}
		}

		.footer {
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
			}

			.input_txt {
				width: calc(100% - 240rpx);
				line-height: 80rpx;
				height: 80rpx;
				background-color: #f4f3f3;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}

			.button {
				width: 140rpx;
				line-height: 80rpx;
				display: block;
				height: 80rpx;
				border: 0px;
				background-color: #fe9697;
				border-radius: 20rpx;
				padding: 0px;
				margin: 0;
				outline: none;
				color: #fff;
				text-align: center;
				cursor: pointer;
			}
		}

	}
</style>
